<template>
  <div class="List">
    <el-scrollbar>
      <div class="heard">
        <h3>员工列表</h3>
        <p>添加新员工/删除离职员工，申请后请主动联系后台</p>
      </div>
      <div class="bottom">
        <!-- 搜索 -->
        <div class="search">
          <el-input v-model="input" placeholder="搜索小组成员" clearable>
            <template #prefix>
              <svg
                class="icon"
                width="20"
                height="20"
                viewBox="0 0 1024 1024"
                xmlns="http://www.w3.org/2000/svg"
                data-v-042ca774=""
                style="margin: 5px 10px 0px 0px; color: rgb(60, 60, 60)"
              >
                <path
                  fill="currentColor"
                  d="M795.904 750.72l124.992 124.928a32 32 0 01-45.248 45.248L750.656 795.904a416 416 0 1145.248-45.248zM480 832a352 352 0 100-704 352 352 0 000 704z"
                ></path>
              </svg>
            </template>
          </el-input>
          <el-button @click="add">
            <svg
              class="icon"
              width="20"
              height="20"
              viewBox="0 0 1024 1024"
              xmlns="http://www.w3.org/2000/svg"
              data-v-042ca774=""
            >
              <path
                fill="currentColor"
                d="M480 480V128a32 32 0 0164 0v352h352a32 32 0 110 64H544v352a32 32 0 11-64 0V544H128a32 32 0 010-64h352z"
              ></path>
            </svg>
          </el-button>
          <el-button @click="onDelete">
            <svg
              class="icon"
              width="20"
              height="20"
              viewBox="0 0 1024 1024"
              xmlns="http://www.w3.org/2000/svg"
              data-v-042ca774=""
            >
              <path
                fill="currentColor"
                d="M128 544h768a32 32 0 100-64H128a32 32 0 000 64z"
              ></path>
            </svg>
          </el-button>
        </div>
        <!-- 列表部分 -->
        <Collapse />
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import { ElScrollbar, ElButton, ElInput } from "element-plus";
import { ref } from "vue";
import Collapse from "./Collapse.vue";
// import service from "../../../../mock/index1";
export default {
  setup() {
    const input = ref("");
    return {
      input,
    };
  },
  components: {
    ElScrollbar,
    ElButton,
    ElInput,
    Collapse,
  },
};
</script>

<style lang='less' spoced>
.List {
  width: 25%;
  padding: 10px;
  background-color: #fff;
  float: left;
  position: relative;
  .heard {
    width: 100%;
    position: static;
    background-color: #fff;
    z-index: 2;
    h3 {
      font-size: 20px;
    }
    p {
      margin: 10px 0;
    }
  }
  .bottom {
    width: 95%;
    background-color: rgb(235, 235, 235);
    border-radius: 4px;
    .search {
      width: 90%;
      margin-left: 20px;
      height: 50px;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      padding-right: 10px;
      .el-input__inner {
        width: 100%;
        font-size: 12px;
        padding-left: 40px;
      }
      .el-button--default {
        width: 10%;
        margin: 2px;
        color: rgb(206, 201, 201);
      }
    }
  }
}
.el-table {
  --el-table-bg-color: #ebebeb;
  --el-table-tr-bg-color: #ebebeb;
}
</style>